<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}">
                <i class="fa fa-comments"></i> ChatApp
            </a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">

            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li>
                        <a href="">
                            <i class="fa fa-user-circle" aria-hidden="true"></i>
                            {{ user.username }}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'logout' %}">
                            <i class="fa fa-sign-out" aria-hidden="true"></i>
                            Log Out
                        </a>
                    </li>
                {% else %}
                    <li>
                        <a href="{% url 'login' %}">
                            <i class="fa fa-sign-in" aria-hidden="true"></i>
                            Log In
                        </a>
                    </li>
                {% endif %}
            </ul>

        </div>
    </div>
</nav>